<!-- 预警统计 -->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="拌合站" prop="identifier" class="query">
        <el-select v-model="queryParams.identifier" clearable placeholder="请选择">
          <el-option v-for="item in stationList" :key="item.name" :label="item.name" :value="item.identifier"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="时间范围" prop="id">
        <deatetime ref="deatetime" v-model="queryParams.time"> </deatetime>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['zhgd:allCapacity:query']">搜索</el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
      </el-form-item>
    </el-form>

    <!-- Echarts -->
    <div id="Chart5" style="`width: 100%;height: 400px;transform-origin: 0 0;margin-top: 20px;`"></div>
  </div>
</template>
    
<script>
import { deptListData } from "@/api/zhgd/hntManage";
import { ListDayStatistics } from "@/api/zhgd/allCapacity";
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import deatetime from "@/components/Datetime"; // 生产日期


export default {
  name: "HntManage",
  data() {
    return {
      Chart5: null,
      timeArr: [],  //日期
      elementaryArr: [],  //初级预警
      intermediateArr: [],  //中级预警
      advancedArr: [],  //高级预警
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 混凝土拌合站数据表格数据
      productList: [],
      // 拌合站搜索框数据
      stationList: [],
      // 查询参数
      queryParams: {},
      deptId: null
    };
  },
  components: {
    deatetime,
  },
  created() { },
  mounted() {
    this.getList();
    this.getProjectList();
  },
  watch: {
    deptId: {
      handler(val, oldVal) {
        if (val) {
          this.queryParams.id = val;
          this.getProjectList();
        } else {
          // console.log("先选择标段")
        }
      },
      deep: true,
      immediate: true,
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /** 查询拌合站搜索框数据 */
    getProjectList() {
      deptListData(this.queryParams).then((response) => {
        this.stationList = response;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.timeArr = [],  //日期
        this.elementaryArr = [],  //初级预警
        this.intermediateArr = [],  //中级预警
        this.advancedArr = [],  //高级预警
        this.queryParams = this.getSearchParams();
      this.getList();
    },
    getSearchParams() {
      const params = {};
      for (const key in this.queryParams) {
        if (key === "time") {
          const time = this.queryParams[key];
          if (time && time.length === 2) {
            params.startTime = time[0];
            params.endTime = time[1];
          }
        } else {
          params[key] = this.queryParams[key];
        }
      }
      return params;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.id = "";
      this.$refs.deatetime.startTime = null;
      this.$refs.deatetime.endTime = null;
      this.queryParams.time = [];
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 预警统计数据列表 */
    getList() {
      ListDayStatistics(this.queryParams).then(response => {
        this.total = response.data.length;
        response.data.forEach((item => {
          this.timeArr.push(item.dateDays)
          this.elementaryArr.push(item.elementary)
          this.intermediateArr.push(item.intermediate)
          this.advancedArr.push(item.advanced)
        }))
        if (document.getElementById("Chart5")) {
          this.createDayChart(response);
        } else {
          this.$nextTick(() => {
            this.createDayChart(response);
          });
        }
      });
    },
    // 盘数图表
    createDayChart(data) {
      if (null == this.Chart5) {
        this.Chart5 = echarts.init(document.getElementById("Chart5"));
      } else {
        this.Chart5.clear();
      }
      let option = this.getLineOption();
      this.Chart5.setOption(option);
    },
    /*** 获取图表配置信息 */
    getLineOption() {
      const colors = ['#5470C6', '#91CC75', '#EE6666'];
      let option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 50,
          left: '',
          right: '',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          icon: "rect",
          data: ['初级预警', '中级预警', '高级预警']
        },
        xAxis: [{
          type: 'category',
          data: this.timeArr,
        }],
        yAxis: [{
          type: 'value',
          position: 'left',
          alignTicks: true,
        },
          // {
          //   type: 'value',
          //   name: "温度",
          //   position: 'right',
          //   alignTicks: true,
          // },
        ],
        graphic: {
          type: 'text',
          left: 'center',
          top: 'middle',
          silent: true,
          invisible: this.total > 0,
          style: {
            fill: '#9d9d9d',
            fontWeight: 'bold',
            text: '暂无数据',
            fontFamily: 'Microsoft YaHei',
            fontSize: '25px'
          }
        },
        series: [
          { name: '初级预警', type: 'line', data: this.elementaryArr },
          { name: '中级预警', type: 'line', data: this.intermediateArr },
          { name: '高级预警', type: 'line', data: this.advancedArr }
        ]
      };
      return option;
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption()
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .query {
  .el-form-item__label {
    width: 100px !important;
  }
}

.app-container {
  margin-top: -50px;
}
</style>
    
    
     
    